<template>
  <div >
      <el-tag
          closable
          type="success"
          @close="closeAgainTag"
      >
        团支书基本信息
      </el-tag>
    <el-tag
        closable
        type="warning"
        @close="closeTag"
    >
      学生基本信息
    </el-tag>
  </div>
  <el-table
      :data="tableDataAgree.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
      :default-sort = "{prop: 'credit', order: 'descending'}"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange">
    <el-table-column label="学分详情">
      <el-table-column
          label="总学分"
          sortable
          prop="after_changeCre">
      </el-table-column>
      <el-table-column label="学分变化" prop="creditNumber">
      </el-table-column>
      <el-table-column label="申请理由" prop="reason">
      </el-table-column>
      <el-table-column label="申请凭证" prop="pic_path">
        <template #default="scope">
          <el-image  :src="url+scope.row.pic_path" min-width="70" height="70" alt="" :preview-src-list="url+scope.row.pic_path"></el-image>
          <!--            v-for="item in scope.row.pic_path.split(',')" v-if="item ? item : '' "-->
        </template>
      </el-table-column>
      <el-table-column label="申请时间" prop="apply_Time">
      </el-table-column>
      <el-table-column label="审批时间" prop="stateTime">
      </el-table-column>
      <el-table-column label="状态" prop="state">
        <template #default="scope">
            <span v-if="scope.row.state===0">
              <i class="el-icon-info" style="color: #ccec5b" aria-hidden="true"></i>
            </span>
          <span v-if="scope.row.state===1">
              <i class="el-icon-success" style="color: #39cf7c" aria-hidden="true"></i>
            </span>
          <span v-if="scope.row.state===2">
              <i class="el-icon-error" style="color: #ED3F14" aria-hidden="true"></i>
            </span>
          <span :style="{ color: scope.row.state === 1 ? '#39cf7c' :scope.row.state === 0 ? '#ccec5b':'#ED3F14' }">{{ scope.row.state === 1 ? '已通过' :scope.row.state === 0 ? '待审批':'未通过' }}</span>
        </template>
      </el-table-column>
    </el-table-column>

    <el-table-column
        align="right">
      <template #header>
        <el-input
            v-model="search"
            size="mini"
            placeholder="输入关键字搜索"/>
      </template>
    </el-table-column>
  </el-table>
</template>
<script lang="ts">
import {getCurrentInstance} from "vue";
import {getLocalStudentAgreeAllApply} from "@/network/manager/getLocalStudentAgreeAllApply";
import {ElMessage} from "element-plus";

export default {
  name:'StudentPassingCreditDetails',
  props:['scId'],
  data(){
    return{
      tableDataAgree:[],
      search: '',
      url: 'http://localhost:7070'

    }
  },
  setup(){
    const {proxy}:any = getCurrentInstance();
    console.log("学生列表传给学分详情的id"+proxy.scId)
    const getLocalCreditRecordOfStu_id=proxy.scId
    getLocalStudentAgreeAllApply(getLocalCreditRecordOfStu_id).then(result=>{
      console.log(result.data.result)
      proxy.tableDataAgree=result.data.result

      const msg = result.data.msg;
      //打印返回结果状态，
      if (result.data.status == 1) {
        ElMessage.error(msg);
      } else {
        //proxy.tableData.splice(index, 1)
        console.log(msg)
        ElMessage.success({
          message: msg, type: 'success'
        });

      }

    }).catch(err=>{
      console.log("查看学分详情失败")
      const msg = "查看学分详情失败！请稍后尝试！";
      ElMessage.error(msg);
    })

    function closeAgainTag(){
      proxy.$emit('fatherMethod')
    }
    function closeTag(){
      const change=0
      proxy.$emit('change',change)
    }


    return{
      closeAgainTag,
      closeTag
    }

  }
}
</script>
